<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

<template>

    <div id="demo">

        <button v-on:click="show = !show">
            Toggle
        </button>

        <transition name="fade">
            <p v-if="show">hello</p>
            <p v-else>hellffo</p>
        </transition>

    </div>
</template>

<script>
// export default {   el: '#app',   data: {     show: true  } };

export default {
  data: function() {
    return {
      show: true
    };
  }
};
</script>
